/**
 * Created by bethinner on 5/17/16.
 */
import React, { Component } from 'react';

import {bindActionCreators} from 'redux'
import * as actions from '../actions/actions.js'

import { connect } from 'react-redux'
import Link from 'react-router/lib/Link'
import browserHistory from 'react-router/lib/browserHistory'
import NavigationBar from '../components/NavigationBar'
import MessageAlert from '../components/MessageAlert'
import cookie from 'react-cookie'
import {fetchGet,fetchPost} from '../utils/httpRequest'

class SubmitOrderContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            valueCardDetail: this.props.location.state.data,
            card_id: this.props.location.state.card_id,
            cardCount: 1,
            showMessage:false,
            returnObj: {},
        };
        //http://pay.96225.com/b2c_wap/c.action  http://115.236.162.165:8083/b2c_wap/c.action
        this._handle = this.hanlde.bind(this);
    }
    componentWillMount() {
        $('#loadingToast').hide();
    }
    hanlde(type) {
        var that = this;
        return function () {
            that.setState({showMessage: false})
        }

    }

    componentDidMount(){

    }

    componentWillUnmount() {


        this.setState({showMessage: false})
    }

    selectPayType(){

        if (window.sessionStorage.getItem('noWx')==1){
            this.pay(0);
            return ;
        }


        var mask = $('#mask');
        var weuiActionsheet = $('#weui_actionsheet');
        weuiActionsheet.addClass('weui_actionsheet_toggle');
        mask.show()
            .focus()//加focus是为了触发一次页面的重排(reflow or layout thrashing),使mask的transition动画得以正常触发
            .addClass('weui_fade_toggle').one('click', function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        $('#actionsheet_cancel').one('click', function () {
            hideActionSheet(weuiActionsheet, mask);
        });
        mask.unbind('transitionend').unbind('webkitTransitionEnd');

        function hideActionSheet(weuiActionsheet, mask) {
            weuiActionsheet.removeClass('weui_actionsheet_toggle');
            mask.removeClass('weui_fade_toggle');
            mask.on('transitionend', function () {
                mask.hide();
            }).on('webkitTransitionEnd', function () {
                mask.hide();
            })
        }
    }

    pay( type) {
        sessionStorage.removeItem("payFront");
        try{
            var uid=cookie.load('mobile');
            if(!uid||uid=="undefined"){
                alert('登录失效');
                browserHistory.replace({
                    pathname: '/login'
                });
                return ;
            }

            if(this.state.returnObj&&this.state.returnObj==0) {//存在取到数据未完成跳转是再发请求的情况
                return ;
            }

            if (type ==1 ){
                //微信支付

                if (null!=this.state.returnObj.code&&this.state.returnObj.code == 0){
                    try{
                        //获取微信支付地址成功
                        window.location.href = this.state.returnObj.data;
                    }catch(e2){
                        alert('微信支付error4',e2)
                    }
                }else {

                    let para = {uid:uid, card_id:this.state.card_id, card_number:this.state.cardCount,wx_pay:1,o2osign:cookie.load("o2osign")};
                    //if(this.state.valueCardDetail.card_name.indexOf("飞凡")>0){
                    //    param.act_id=1;
                    //}
                    if(window.sessionStorage.getItem("retUrl")=="/gifts"){
                        para.act_id=666;
                    }
                    $('#loadingToast').show();
                    fetchPost('pay', para)
                        .then(response => response.json())
                        .then(json => {
                            $('#loadingToast').hide();
                            this.state.returnObj = json;
                            try{
                                if (this.state.returnObj.code == 0) {
                                    //获取订单信息成功
                                    window.location.href = this.state.returnObj.data;
                                }else{
                                    this.setState({returnObj: json,showMessage:true});
                                }
                            }catch(e2){
                                alert('微信支付error2',e2)
                            }
                        })
                }
            }else {
                //支付平台支付
                if (null!=this.state.returnObj.code&&this.state.returnObj.code == 0){
                    try{
                        //获取订单信息成功
                        var form1 = document.getElementById("myform");
                        form1 .submit();
                    }catch(e2){
                        alert('error4',e2)
                    }
                }else {
                    let para = {uid:uid, card_id:this.state.card_id, card_number:this.state.cardCount,wx_pay:0,o2osign:cookie.load("o2osign")};
                    //if(this.state.valueCardDetail.card_name.indexOf("飞凡")>0){
                    //    para.act_id=1;
                    //}
                    if(window.sessionStorage.getItem("retUrl")=="/gifts"){
                        para.act_id=666;
                    }
                    $('#loadingToast').show();
                    fetchPost('pay', para)
                        .then(response => response.json())
                        .then(json => {

                            $('#loadingToast').hide();
                            this.state.returnObj = json;
                            try{
                                //console.log(this.state.returnObj)
                                if (this.state.returnObj.code == 0) {
                                    //获取订单信息成功
                                    var form1 = document.getElementById("myform");
                                    $("#reqseq").val(json.data.reqseq);
                                    $("#signLicense").val(json.data.signLicense);
                                    $("#apptype").val(json.data.apptype);
                                    $("#smkUserId").val(json.data.smkUserId);
                                    $("#FrontUrl").val(json.data.FrontUrl);
                                    $("#txntype").val(json.data.txntype);

                                    if(window.sessionStorage.getItem("openid")){
                                        $("#openid").val(window.sessionStorage.getItem("openid"));
                                    }else{
                                        $("#openid").val("");
                                    }
                                    form1.submit();

                                }else{
                                    this.setState({returnObj: json,showMessage:true});
                                }
                            }catch(e2){
                                alert('error2',e2)
                            }
                        })
                }
            }
        }catch(e){
            alert(e);
        }
    }

    render() {
        return (
            <div style={{
                    height:document.documentElement.clientHeight,
                    backgroundColor:"white"
            }}>
                <NavigationBar Title="提交订单" LeftBar="true"/>
                {this.state.showMessage&&
                    <MessageAlert message={this.state.returnObj.msg} type={this.state.returnObj.code}
                                  handle={this._handle}/>}

                <form id="myform" name="myform" action="http://pay.96225.com/b2c_wap/c.action" method="post">
                    <input type="hidden" value="" name="reqseq" id="reqseq"/>
                    <input type="hidden" value="" name="signLicense" id="signLicense"/>
                    <input type="hidden" value="" name="apptype" id="apptype"/>
                    <input type="hidden" value="" name="smkUserId" id="smkUserId"/>
                    <input type="hidden" value="" name="FrontUrl" id="FrontUrl"/>
                    <input type="hidden" value="" name="txntype" id="txntype"/>
                    <input type="hidden" value="" name="openid"  id="openid"/>
                </form>
                    <div style={{width:"100%",marginTop:"23px"}}></div>
                <div style={parentDivStyle}>
                    <div style={bigLeftChildDivStyle}>
                        {this.state.valueCardDetail.business_name}
                    </div>
                    <br/>
                    <div style={rightChildDivStyle}>
                        {this.state.valueCardDetail.card_name}
                    </div>
                </div>

                <img src="/public/img/line_icon.png"
                     style={{width:"100%"}}/>

                <div style={parentDivStyle}>
                    <div style={leftChildDivStyle}>
                        订单总价
                    </div>
                    <div style={rightColorChildDivStyle}>
                        ¥ {this.state.valueCardDetail.purchase_price * this.state.cardCount}元
                    </div>
                </div>
                <div style={buttonStyle} id="showActionSheet" onClick={this.selectPayType.bind(this)}>
                    去支付
                </div>
                    <div id="actionSheet_wrap">
                        <div className="weui_mask_transition" id="mask"></div>
                        <div className="weui_actionsheet" id="weui_actionsheet">
                            <div className="weui_actionsheet_menu">
                                <div className="weui_actionsheet_cell" onClick={this.pay.bind(this,1)}>微信支付</div>
                                <div className="weui_actionsheet_cell" onClick={this.pay.bind(this,0)}>市民卡支付</div>
                            </div>
                            <div className="weui_actionsheet_action">
                                <div className="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
                            </div>
                        </div>
                    </div>
            </div>

        )
    }
}




let smallIconStyle = {
    height: "21px",
    width: "21px"
};
let buttonStyle = {
    backgroundColor: "#6BAC72",
    borderColor: "#6BAC72",
    color: "white",
    margin: "30px 23px 30px 22px",
    borderRadius: "5px",
    fontSize: "24px",
    textAlign: "center",
    height: "45px",
    lineHeight: "45px"
};
let parentDivStyle = {
    position: "relative",
    marginLeft: "23px",
    marginRight: "23px",
    minHeight: "50px",
    lineHeight:"22px"
};
let bigLeftChildDivStyle = {
    //float:"left",
    fontSize: "18px",
    //width:"60%",
    textAlign:"left"
};
let leftChildDivStyle = {
    float:"left",
    width:"30%",
    fontSize: "18px",
    marginTop: "23px"
};
let rightChildDivStyle = {
    //float:"left",
    //width:"40%",
    textAlign:"right",
    fontSize: "20px"
};
let rightColorChildDivStyle = {
    position: "absolute",
    right: "0px",
    bottom: "-3px",
    fontSize: "20px",
    color: "#F89108",
    marginTop: "23px"
};
let smallRightColorChildDivStyle = {
    position: "absolute",
    right: "0px",
    bottom: "0px",
    fontSize: "12px",
    color: "#4A4A4A",
    height: "21px",
    lineHeight: "21px",
    textAlign: "center"
};
let smallSpanStyle = {
    marginLeft: "5px",
    bottom: "5px",
    position: "relative"


}


function mapStateToProps(state) {
    return {
        //getOrderAndPayResult: state.get('getOrderAndPayResult').toJS()
    }

}
function mapDispatchToProps(dispatch) {

    return bindActionCreators(actions, dispatch);
}
SubmitOrderContainer.defaultProps = {
    //getOrderAndPayResult: {code:0,payend:false}
}

SubmitOrderContainer.propTypes = {

}
module.exports = connect(mapStateToProps, mapDispatchToProps)(SubmitOrderContainer);

